<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>

        <span>你的爱好是<input type="checkbox" id="all">全选/不全选(全选自动勾选)</span>
        <input type="checkbox" class="option" value="足球">足球
        <input type="checkbox" class="option" value="篮球">篮球
        <input type="checkbox" class="option" value="羽毛球">羽毛球
        <input type="checkbox" class="option" value="乒乓球">乒乓球
    </div>
    <button id="btnCheck">全选</button>
    <button id="unbtn">全不选</button>
    <button id="invert">反选</button>
    <button id="print">提交并打印</button>


    <div>
        <ul id="ul">
            <li class="beijing">北京</li>
            <li class="shanghai">上海</li>
            <li class="sichuan">四川</li>
            <li class="shenzhen">深圳</li>
        </ul>

        <button id="newGuangzhou">创建一个广州节点</button>
        <button id="before">将广州节点插入到北京节点之前</button>
        <button id="replace">使用广州节点替换北京节点</button>
        <button id="remove">删除广州节点</button>
        <button id="getEle">获取城市列表</button>
        <button id="getBeijing">获取北京内的节点</button>
    </div>

    <script>
        checkAll = document.getElementById("all")
        checkOption = document.getElementsByClassName("option")

        checkAll.addEventListener('change', function(){
            for(let i = 0;i<checkOption.length;i++){
                checkOption[i].checked = checkAll.checked
            }
        })

        let btnCheck = document.getElementById("btnCheck")
        let unbtn = document.getElementById("unbtn")
        let invert = document.getElementById("invert")
        let print = document.getElementById("print")

        btnCheck.onclick = function(){
            for(let i = 0;i<checkOption.length;i++){
                checkOption[i].checked = true
            }
        }

        unbtn.onclick = function(){
            for(let i = 0;i<checkOption.length;i++){
                checkOption[i].checked = false
            }
        }

        invert.onclick = function(){
            for(let i = 0;i<checkOption.length;i++){
                checkOption[i].checked =!checkOption[i].checked
                
            }

        }

        print.onclick =function(){
            for(let i = 0;i<checkOption.length;i++){
                //console.log(checkOption[i].checked)
                if(checkOption[i].checked){
                    console.log(checkOption[i].value);
                }
            }
        }

        let newGuangzhou = document.getElementById("newGuangzhou")
        let ul = document.getElementById("ul")
        newGuangzhou.onclick = function(){
            if(!document.querySelector(".guangzhou")){
                creat = document.createElement('li')
                creat.innerHTML = "广州"
                creat.classList.add("guangzhou")
                ul.appendChild(creat)
            }
        }

        let before = document.getElementById("before")
        before.onclick = function(){
            let beijing = document.querySelector(".beijing")
            let guangzhou = document.querySelector(".guangzhou")
            if(!document.querySelector(".guangzhou")){
                creat = document.createElement('li')
                creat.innerHTML = "广州"
                creat.classList.add("guangzhou")
                ul.insertBefore(creat,beijing)
            }
        }

        let replace = document.getElementById("replace")
        replace.onclick = function(){
            let beijing = document.querySelector(".beijing")
            let guangzhou = document.querySelector(".guangzhou")
            if(!document.querySelector(".guangzhou")){
                creat = document.createElement('li')
                creat.innerHTML = "广州"
                creat.classList.add("guangzhou")
                ul.replaceChild(creat,beijing)
            }
        }

        let remove = document.getElementById("remove")
        remove.onclick = function(){
            if(!document.querySelector(".guangzhou")){
                let guangzhou = document.getElementsByClassName("guangzhou")
                creat = document.createElement('li')
                creat.innerHTML = "广州"
                creat.classList.add("guangzhou")
                ul.removeChild(guangzhou)
            }
        }

        let getEle = document.getElementById("getEle")
        getEle.onclick = function(){
            console.log(ul.children)
        }

        let getBeijing = document.getElementById("getBeijing")
        getBeijing.onclick = function(){
            let beijing = document.querySelector(".beijing")
            console.log(beijing.children)
        }
        

        

    </script>
</body>
</html>